<template>
  <el-dialog
      v-model="dialogVisible"
      title="新增宿舍"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="楼栋:">
        <el-select v-model="form.deptId" placeholder="下拉选择楼栋">
          <el-option v-for="(item,index) in deptList" :key="index" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="室长:">
        <el-select v-model="form.roommaster" placeholder="下拉选择室长">
          <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="宿舍号:">
        <el-input v-model="form.number" placeholder="请输入宿舍号"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="update()">
          新增
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "add",
  props: {
    getDialog: {
      type: Boolean,
      required: true
    }
  },
  watch: {
    getDialog: {
      handler(val) {
        this.dialogVisible = val
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        deptId: "",
        number: "",
        roommaster: "",
        cost: 0
      },
      deptList: [],
      userList: []
    }
  },
  methods: {
    getDepts() {
      let data = {
        name: undefined,
        start: 0,
        end: 1000
      }
      axios({
        url: `http://localhost:8888/dept/list`,
        method: "post",
        data: data
      }).then((res) => {
        this.deptList = res.data
      })
    },
    getUserInfos() {
      let data = {
        start: 0,
        end: 1000
      }
      axios({
        url: `http://localhost:8888/info/list`,
        method: "post",
        data: data
      }).then((res) => {
        this.userList = res.data
      })
    },
    update() {
      axios({
        url: "http://localhost:8888/dormitory/info/add",
        method: "post",
        data: this.form
      }).then(res => {
        if (res.data) {
          ElMessage({
            message: "新增成功!",
            type: "success"
          })
          this.handleClose()
        } else {
          ElMessage({
            message: "新增失败!",
            type: "warning"
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.$emit("close", false)
    }
  },
  mounted() {
    this.getDepts()
    this.getUserInfos()
  }
}
</script>

<style scoped>

</style>